import {designPage} from "plain-design-composition";
import {useTableOption} from "../../../module/useTableOption";
import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";

export const demo1 = designPage(() => {

  const option = useTableOption({
    url: '/demo',
    fill: true,
    // showRows: 1,
    // loadOnStart: false,
    // filterFormColumn: 2,
    /*permit: {
      show: {
        // insert: false,
        // update: false,
        // delete: false,
        // other: false,
        codes: {
          'outer-update': false,
        }
      },
      disabled: {
        insert: true,
      },
    },*/
  });

  const onClick = () => {
    console.log('click');
  };

  const selectOptions = [
    { label: '消费者', status: 'consumer' },
    { label: '潜在客户', status: 'potential' },
    { label: '门店', status: 'store' },
  ];

  const filterConfig = {
    // formItemAttrs: { column: 2 }
  };

  return () => (
    <AutoTable option={option}>
      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
      <PlcNumber title="计数" field="count" required/>
      <PlcInput title="文本"
                field="normalText"
                required
                width={150}
                fixed="left"
                filterConfig={filterConfig}
                defaultSearch
                defaultSearchValue="da"
                v-slots={{
                  normal: ({ row }) => (
                    <span>[{row.normalText}]</span>
                  )
                }}
      />
      <PlcNumber title="数字" field="numberVal"/>
      <PlcSelect title="下拉选择" field="selectVal">
        {selectOptions.map((item) => (
          <SelectOption children={item.label} value={item.status} key={item.status}/>
        ))}
      </PlcSelect>
      <PlcInput title="邮箱(校验测试)" field="email" validateType="email"/>
    </AutoTable>
  );
});
